@import "reset.less";
@import "fnList.less";
@import "varList.less";

/*去除浏览器中的自带默认焦点的边框*/
*:focus {
  outline: none;
}
html,
body {
  background-color: #ffff;
}
@{header} {
  .width();
  height:0.44rem;
  .flex();
  .flex-justify();
  .flexible(30/2, font-size);
  align-items:center;
  padding:0 0.21rem;
  a {
    .block();
    &:first-of-type {
      .inline-block();
      .flexible(0, font-size);
      .fn-px-rem(width, 50);
      .fn-px-rem(height, 50);
      // .flexible(60,height);
      // .flexible(60,width);
      background: url(../images/icon/sprites.png) no-repeat -0.2rem -0.13rem;
      .backgroundSize(3.75rem, 4.57rem);

    }

    &:nth-child(2) {
      .flexible(16, font-size);
      .font-weight();
      .color(#000000);
    }
    &:last-of-type{
      color:#1448AE;
    }
  }
}

@{section} {
  padding:0.35rem 0.24rem;
  background-color: white;
  .flexible(14, font-size);
  .width();
  max-width: 750px;
  margin:0 auto;
  .login-input {
    div {  
      .color(#a1a1a1);
       align-items: center;
      .flex();
      justify-content: space-between;
      border-bottom: 1px solid #cccccc;
       .width();
      .flexible(80/2, height);
      background-color: white;
       span {
        .flexible(14, font-size);
        font-weight:bold;
        color: #666666; 
        width:20%;  
      }

      input {
        letter-spacing: 2px;
        .flexible(14,font-size);
        border: none;
        width:60%;
        // padding-left: 0.2rem;
        // color:rgba(204,204,204,0.8);
      }
      input::-webkit-input-placeholder{
        color:#CCCCCC;
    }
      &:nth-child(1) label{
    
      .flexible(20, width);
      .flexible(20, height);
      background: url(../images/icon/sprites.png) no-repeat -1.12rem -0.145rem;
      // background: url(../images/icon/sprites.png) no-repeat -224px -29px;
      .backgroundSize(3.75rem, 4.57rem);
      }
      &:nth-child(2) label{
        .flexible(20, width);
        .flexible(20, height);
        background: url(../images/icon/sprites.png) no-repeat -1.4rem -0.145rem;
        // background: url(../images/icon/sprites.png) no-repeat -224px -29px;
        .backgroundSize(3.75rem, 4.57rem);
        }
    }
    .login-btn{
      .flex();
      justify-content: center;
      margin-top:0.32rem;
      button{
        .cursor();
        background-color: #f7c612;
        width: 100%;
        height:0.4rem;
        border: none;
        border-radius:0.04rem;
        .color(white);
        letter-spacing: 3px;
        font-size:0.16rem;
        font-weight:bold;
      }
   }
  }

  .login-btn_txt{
    margin-top:0.2rem;
    font-size:0.12rem;
    color:rgba(153,153,153,1);
    .flex();
    justify-content:space-between;
    p,a{  .color(#a1a1a1);}
  }
}

@{footer}{
  .width();
  ul{
    // .flexible(667/2,height);
    margin-top:2.06rem;
    .flex();
    .flex-align();
    justify-content: space-around;
    li{
      // flex: 1;
      width: 10%;
       text-align: center;
       a{
         .inline-block();
        .flexible(40, width);
        .flexible(40, height);
        // border: 1px solid salmon;
        border-radius: 50%;
       }
       &:nth-child(1) a{
        background:#5bbe61 url(../images/icon/sprites.png) no-repeat -1.66rem -0.05rem;
        .backgroundSize(3.75rem, 4.57rem);
       }
       &:nth-child(2) a{
        background:#56b1e8 url(../images/icon/sprites.png) no-repeat -2.02rem -0.05rem;
        .backgroundSize(3.75rem, 4.57rem);
       }
       &:nth-child(3) a{
        background:#666666 url(../images/icon/sprites.png) no-repeat -2.38rem -0.05rem;
        .backgroundSize(3.75rem, 4.57rem);
       }
       &:nth-child(4) a{
        background:#dd6e67 url(../images/icon/sprites.png) no-repeat  -2.74rem -0.05rem;
        .backgroundSize(3.75rem, 4.57rem);
       }
       &:nth-child(5) a{
        background:#dd6e67 url(../images/icon/sprites.png) no-repeat -3.11rem -0.05rem;
        .backgroundSize(3.75rem, 4.57rem);
       }
    }
  }
}